<template>
  <view class="search-container">
    <!-- 搜索头部 -->
    <view class="search-header">
      <view class="search-box">
        <text class="iconfont icon-search"></text>
        <input 
          type="text"
          v-model="keyword"
          placeholder="搜索医院/科室/医生/疾病"
          :focus="true"
          @input="onSearch"
          @confirm="onConfirm"
        />
        <text 
          class="iconfont icon-close"
          v-if="keyword"
          @tap="clearKeyword"
        ></text>
      </view>
      <text class="cancel-btn" @tap="goBack">取消</text>
    </view>
    
    <!-- 搜索历史 -->
    <view class="history-section" v-if="!keyword && searchHistory.length">
      <view class="section-header">
        <text class="title">搜索历史</text>
        <text class="clear-btn" @tap="clearHistory">清空历史</text>
      </view>
      <view class="history-list">
        <view 
          class="history-item"
          v-for="(item, index) in searchHistory"
          :key="index"
          @tap="useHistory(item)"
        >
          <text class="iconfont icon-time"></text>
          <text class="keyword">{{ item }}</text>
          <text 
            class="delete"
            @tap.stop="deleteHistory(index)"
          >×</text>
        </view>
      </view>
    </view>
    
    <!-- 热门搜索 -->
    <view class="hot-section" v-if="!keyword">
      <view class="section-header">
        <text class="title">热门搜索</text>
      </view>
      <view class="hot-list">
        <view 
          class="hot-item"
          v-for="(item, index) in hotSearches"
          :key="index"
          @tap="useHot(item)"
        >
          <text class="rank" :class="{ top: index < 3 }">{{ index + 1 }}</text>
          <text class="keyword">{{ item.keyword }}</text>
          <text class="count">{{ item.count }}次搜索</text>
        </view>
      </view>
    </view>
    
    <!-- 搜索建议 -->
    <view class="suggest-section" v-if="keyword && suggests.length">
      <view 
        class="suggest-item"
        v-for="(item, index) in suggests"
        :key="index"
        @tap="selectSuggest(item)"
      >
        <text class="iconfont" :class="getTypeIcon(item.type)"></text>
        <view class="info">
          <text class="name">{{ item.name }}</text>
          <text class="desc">{{ item.desc }}</text>
        </view>
      </view>
    </view>
    
    <!-- 搜索结果 -->
    <view class="result-section" v-if="keyword && !suggests.length">
      <view class="tab-bar">
        <view 
          class="tab-item"
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{ active: currentTab === index }"
          @tap="switchTab(index)"
        >
          <text>{{ tab.name }}</text>
          <text class="count" v-if="tab.count">({{ tab.count }})</text>
        </view>
      </view>
      
      <!-- 医院列表 -->
      <scroll-view 
        v-if="currentTab === 0"
        scroll-y
        class="result-list"
        @scrolltolower="loadMore"
      >
        <view 
          class="hospital-item"
          v-for="(item, index) in hospitals"
          :key="index"
          @tap="viewHospital(item)"
        >
          <image :src="item.image" mode="aspectFill" class="hospital-image" />
          <view class="info">
            <text class="name">{{ item.name }}</text>
            <text class="type">{{ item.type }}</text>
            <view class="tags">
              <text 
                v-for="(tag, idx) in item.tags"
                :key="idx"
              >{{ tag }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <!-- 科室列表 -->
      <scroll-view 
        v-if="currentTab === 1"
        scroll-y
        class="result-list"
        @scrolltolower="loadMore"
      >
        <view 
          class="department-item"
          v-for="(item, index) in departments"
          :key="index"
          @tap="viewDepartment(item)"
        >
          <image :src="item.icon" mode="aspectFit" class="department-icon" />
          <view class="info">
            <text class="name">{{ item.name }}</text>
            <text class="desc">{{ item.desc }}</text>
          </view>
        </view>
      </scroll-view>
      
      <!-- 医生列表 -->
      <scroll-view 
        v-if="currentTab === 2"
        scroll-y
        class="result-list"
        @scrolltolower="loadMore"
      >
        <view 
          class="doctor-item"
          v-for="(item, index) in doctors"
          :key="index"
          @tap="viewDoctor(item)"
        >
          <image :src="item.avatar" mode="aspectFill" class="doctor-avatar" />
          <view class="info">
            <view class="name-title">
              <text class="name">{{ item.name }}</text>
              <text class="title">{{ item.title }}</text>
            </view>
            <text class="hospital">{{ item.hospital }}</text>
            <text class="specialty">{{ item.specialty }}</text>
          </view>
        </view>
      </scroll-view>
      
      <!-- 疾病列表 -->
      <scroll-view 
        v-if="currentTab === 3"
        scroll-y
        class="result-list"
        @scrolltolower="loadMore"
      >
        <view 
          class="disease-item"
          v-for="(item, index) in diseases"
          :key="index"
          @tap="viewDisease(item)"
        >
          <view class="info">
            <text class="name">{{ item.name }}</text>
            <text class="department">{{ item.department }}</text>
          </view>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 搜索关键词
const keyword = ref('')

// 搜索历史
const searchHistory = ref([
  '心内科',
  '张医生',
  '感冒发烧',
  '镜湖医院'
])

// 热门搜索
const hotSearches = ref([
  { keyword: '新冠疫苗', count: 12580 },
  { keyword: '心内科', count: 8654 },
  { keyword: '儿科', count: 6532 },
  { keyword: '镜湖医院', count: 4521 },
  { keyword: '发烧咳嗽', count: 3654 }
])

// 搜索建议
const suggests = ref([])

// 搜索结果tabs
const tabs = ref([
  { name: '医院', count: 0 },
  { name: '科室', count: 0 },
  { name: '医生', count: 0 },
  { name: '疾病', count: 0 }
])
const currentTab = ref(0)

// 搜索结果列表
const hospitals = ref([])
const departments = ref([])
const doctors = ref([])
const diseases = ref([])

// 输入搜索
const onSearch = (e) => {
  const value = e.detail.value.trim()
  if (!value) {
    suggests.value = []
    return
  }
  
  // 这里调用搜索建议API
  suggests.value = [
    {
      type: 'hospital',
      name: '澳门镜湖医院',
      desc: '三级甲等综合医院'
    },
    {
      type: 'department',
      name: '心内科',
      desc: '心血管疾病诊治'
    },
    {
      type: 'doctor',
      name: '张医生',
      desc: '主任医师 心内科'
    }
  ]
}

// 确认搜索
const onConfirm = () => {
  if (!keyword.value) return
  suggests.value = []
  
  // 保存搜索历史
  if (!searchHistory.value.includes(keyword.value)) {
    searchHistory.value.unshift(keyword.value)
    if (searchHistory.value.length > 10) {
      searchHistory.value.pop()
    }
  }
  
  // 加载搜索结果
  loadSearchResult()
}

// 加载搜索结果
const loadSearchResult = () => {
  // 这里调用搜索API
  hospitals.value = [
    {
      id: 1,
      name: '澳门镜湖医院',
      type: '三级甲等综合医院',
      image: '/static/hospital/kiang-wu.jpg',
      tags: ['综合医院', '24小时急诊']
    }
  ]
  departments.value = [
    {
      id: 1,
      name: '心内科',
      desc: '心血管疾病诊治',
      icon: '/static/department/cardiology.png'
    }
  ]
  doctors.value = [
    {
      id: 1,
      name: '张医生',
      title: '主任医师',
      avatar: '/static/doctor/avatar1.jpg',
      hospital: '澳门镜湖医院',
      specialty: '冠心病、高血压、心律失常'
    }
  ]
  diseases.value = [
    {
      id: 1,
      name: '冠心病',
      department: '心内科'
    }
  ]
  
  // 更新数量
  tabs.value[0].count = hospitals.value.length
  tabs.value[1].count = departments.value.length
  tabs.value[2].count = doctors.value.length
  tabs.value[3].count = diseases.value.length
}

// 切换标签
const switchTab = (index) => {
  currentTab.value = index
}

// 加载更多
const loadMore = () => {
  // 这里调用加载更多API
}

// 使用搜索历史
const useHistory = (keyword) => {
  keyword.value = keyword
  onConfirm()
}

// 删除搜索历史
const deleteHistory = (index) => {
  searchHistory.value.splice(index, 1)
}

// 清空搜索历史
const clearHistory = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清空搜索历史吗？',
    success: (res) => {
      if (res.confirm) {
        searchHistory.value = []
      }
    }
  })
}

// 使用热门搜索
const useHot = (item) => {
  keyword.value = item.keyword
  onConfirm()
}

// 选择搜索建议
const selectSuggest = (item) => {
  keyword.value = item.name
  onConfirm()
}

// 获取类型图标
const getTypeIcon = (type) => {
  const icons = {
    hospital: 'icon-hospital',
    department: 'icon-department',
    doctor: 'icon-doctor',
    disease: 'icon-disease'
  }
  return icons[type]
}

// 清除关键词
const clearKeyword = () => {
  keyword.value = ''
  suggests.value = []
}

// 返回
const goBack = () => {
  uni.navigateBack()
}

// 查看详情
const viewHospital = (hospital) => {
  uni.navigateTo({
    url: `/pages/hospital/detail?id=${hospital.id}`
  })
}

const viewDepartment = (department) => {
  uni.navigateTo({
    url: `/pages/department/detail?id=${department.id}`
  })
}

const viewDoctor = (doctor) => {
  uni.navigateTo({
    url: `/pages/doctor/detail?id=${doctor.id}`
  })
}

const viewDisease = (disease) => {
  uni.navigateTo({
    url: `/pages/disease/detail?id=${disease.id}`
  })
}
</script>

<style lang="scss">
.search-container {
  min-height: 100vh;
  background: $bg-color;
  padding-top: var(--status-bar-height);
  
  .search-header {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: #fff;
    
    .search-box {
      flex: 1;
      height: 72rpx;
      background: $bg-color;
      border-radius: $radius-xl;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      margin-right: 20rpx;
      
      .iconfont {
        font-size: 32rpx;
        color: $text-secondary;
        margin-right: 12rpx;
        
        &.icon-close {
          margin-right: 0;
          margin-left: 12rpx;
        }
      }
      
      input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
      }
    }
    
    .cancel-btn {
      font-size: 28rpx;
      color: $text-regular;
      
      &:active {
        opacity: 0.8;
      }
    }
  }
  
  .history-section,
  .hot-section {
    background: #fff;
    margin-top: 20rpx;
    padding: 30rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
      
      .clear-btn {
        font-size: 28rpx;
        color: $text-secondary;
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
  
  .history-list {
    .history-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      .iconfont {
        font-size: 32rpx;
        color: $text-secondary;
        margin-right: 12rpx;
      }
      
      .keyword {
        flex: 1;
        font-size: 28rpx;
        color: $text-regular;
      }
      
      .delete {
        font-size: 40rpx;
        color: $text-secondary;
        padding: 0 20rpx;
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
  
  .hot-list {
    .hot-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      .rank {
        width: 40rpx;
        font-size: 32rpx;
        color: $text-secondary;
        font-weight: bold;
        
        &.top {
          color: $danger;
        }
      }
      
      .keyword {
        flex: 1;
        font-size: 28rpx;
        color: $text-regular;
        margin: 0 20rpx;
      }
      
      .count {
        font-size: 24rpx;
        color: $text-secondary;
      }
    }
  }
  
  .suggest-section {
    background: #fff;
    
    .suggest-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      .iconfont {
        font-size: 40rpx;
        color: $primary-color;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        
        .name {
          font-size: 30rpx;
          color: $text-primary;
          margin-bottom: 4rpx;
          display: block;
        }
        
        .desc {
          font-size: 24rpx;
          color: $text-secondary;
        }
      }
      
      &:active {
        background: $bg-color;
      }
    }
  }
  
  .result-section {
    .tab-bar {
      display: flex;
      background: #fff;
      padding: 0 30rpx;
      border-bottom: 1rpx solid #eee;
      
      .tab-item {
        padding: 20rpx 30rpx;
        font-size: 28rpx;
        color: $text-regular;
        position: relative;
        
        .count {
          font-size: 24rpx;
          color: $text-secondary;
        }
        
        &.active {
          color: $primary-color;
          font-weight: bold;
          
          &::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 40rpx;
            height: 4rpx;
            background: $primary-color;
            border-radius: 2rpx;
          }
          
          .count {
            color: $primary-color;
          }
        }
      }
    }
    
    .result-list {
      height: calc(100vh - 300rpx);
      
      .hospital-item {
        display: flex;
        padding: 30rpx;
        background: #fff;
        border-bottom: 1rpx solid #eee;
        
        .hospital-image {
          width: 160rpx;
          height: 120rpx;
          border-radius: $radius-lg;
          margin-right: 20rpx;
        }
        
        .info {
          flex: 1;
          
          .name {
            font-size: 32rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .type {
            font-size: 26rpx;
            color: $text-regular;
            margin-bottom: 12rpx;
            display: block;
          }
          
          .tags {
            text {
              display: inline-block;
              font-size: 22rpx;
              color: $primary-color;
              background: $primary-light;
              padding: 4rpx 12rpx;
              border-radius: $radius-sm;
              margin-right: 12rpx;
            }
          }
        }
      }
      
      .department-item {
        display: flex;
        align-items: center;
        padding: 30rpx;
        background: #fff;
        border-bottom: 1rpx solid #eee;
        
        .department-icon {
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
        }
        
        .info {
          flex: 1;
          
          .name {
            font-size: 30rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 4rpx;
            display: block;
          }
          
          .desc {
            font-size: 26rpx;
            color: $text-regular;
          }
        }
      }
      
      .doctor-item {
        display: flex;
        padding: 30rpx;
        background: #fff;
        border-bottom: 1rpx solid #eee;
        
        .doctor-avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        
        .info {
          flex: 1;
          
          .name-title {
            margin-bottom: 8rpx;
            
            .name {
              font-size: 32rpx;
              color: $text-primary;
              font-weight: bold;
              margin-right: 12rpx;
            }
            
            .title {
              font-size: 26rpx;
              color: $text-regular;
            }
          }
          
          .hospital {
            font-size: 26rpx;
            color: $text-regular;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .specialty {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
      }
      
      .disease-item {
        display: flex;
        align-items: center;
        padding: 30rpx;
        background: #fff;
        border-bottom: 1rpx solid #eee;
        
        .info {
          flex: 1;
          margin-right: 20rpx;
          
          .name {
            font-size: 30rpx;
            color: $text-primary;
            margin-bottom: 4rpx;
            display: block;
          }
          
          .department {
            font-size: 26rpx;
            color: $text-regular;
          }
        }
        
        .iconfont {
          font-size: 32rpx;
          color: $text-secondary;
        }
      }
    }
  }
}
</style> 